<template>
	<div class="container">
		<JxNavbar title="我的金币" />

		<view class="card">
			<text class="tip">金币余额</text>
			<text class="price">{{ userInfo['gold'] }}</text>
		</view>

		<div class="jx-cell">
			<div class="jx-cell-box">
				<view class="cell-item uv-border-bottom" @click="navigateTo('/pages/sub/my/gold/recharge/index')">
					<div class="label">
						<i class="iconfont icon-chongzhi"></i>
						<text>充值</text>
					</div>
					<div class="right">
						<i class="iconfont icon-right"></i>
					</div>
				</view>

				<view class="cell-item uv-border-bottom" @click="navigateTo('/pages/sub/my/gold/record/index')">
					<div class="label">
						<i class="iconfont icon-chongzhijilu"></i>
						<text>金币记录</text>
					</div>
					<div class="right">
						<i class="iconfont icon-right"></i>
					</div>
				</view>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import tools from '@/utils/tools/index.js'
import { useUserStore } from '@/store/user.js';
import JxNavbar from '@/components/navbar/index.vue'

const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo);

function navigateTo(url) {
	uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.container {
	padding: 0 $side-width;

	.card {
		width: 100%;
		height: 280rpx;
		padding: 40rpx 30rpx;
		background-image: url("https://cdn.jingmingos.com/static/my/wallet.png");
		background-size: 100% 100%;
		color: #fff;
		box-sizing: border-box;
		margin: $side-width 0;
		display: flex;
		flex-direction: column;

		.tip {
			line-height: 40rpx;
			font-size: 36rpx;
		}

		.price {
			margin-top: 8rpx;
			font-size: 72rpx;
			line-height: 92rpx;
		}
	}

	.jx-cell {
		margin: 0;

		.cell-item {
			padding: 0;
			height: 120rpx;

			.label {
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 44rpx;
					margin-right: 10rpx;
				}

				.icon-chongzhi {
					color: #3ed098;
				}

				.icon-chongzhijilu {
					color: #fbbe59;
				}
			}
		}
	}
}
</style>